<template>
  <div>
    <el-card shadow="hover">
      <div>
        <span>选择角色： </span>
        <el-select v-model="activeName" class="select" placeholder="请选择角色" @change="selectChange">
          <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"> </el-option>
        </el-select>
        <div>
          <el-checkbox class="all" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-checkbox-group v-if="checkData.length" v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in checkData" :label="city.id" :key="city.id">{{
              city.statisticsName
            }}</el-checkbox>
          </el-checkbox-group>
          <div v-else>没有数据</div>
        </div>
        <el-button class="subBut" size="small" type="primary" @click="censusSub">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as api from '@/api/project'

export default {
  data() {
    return {
      // 角色
      activeName: 2,
      roleList: [],
      // 全选
      checkAll: false,
      isIndeterminate: false,
      // 选择数据
      checkedCities: [],
      checkData: [
        { id: 1, statisticsName: '办结数' },
        { id: 2, statisticsName: '事项登记数' },
        { id: 3, statisticsName: '被退回数' },
        { id: 4, statisticsName: '受理数' },
        { id: 5, statisticsName: '退回网格数' },
        { id: 6, statisticsName: '退回处置部门数' },
        { id: 7, statisticsName: '作废数' },
        { id: 8, statisticsName: '事件数' },
        { id: 9, statisticsName: '快速事件数' },
        { id: 10, statisticsName: '核实数' },
        { id: 12, statisticsName: '处置数' },
      ],
    }
  },
  created() {
    this.getRoleList()
    this.getRoleStatistical(2)
  },
  methods: {
    // 切换角色
    selectChange(e) {
      this.getRoleStatistical(e)
      this.checkedCities = []
      this.checkAll = false
      this.isIndeterminate = false
    },
    // 获取角色
    getRoleList() {
      api.statisticRole().then(res => {
        if (res.code == '200') {
          this.roleList = res.data
        }
      })
    },
    // 按照对应角色展示统计数据
    getRoleStatistical(id) {
      let data = {
        id,
      }
      api.statisticalRoleList(data).then(res => {
        if (res.code == '200') {
          this.checkedCities = res.data.map(item => {
            return item.id
          })
          this.handleCheckedCitiesChange(this.checkedCities)
        }
      })
    },
    handleCheckAllChange(val) {
      let arr = this.checkData.map(item => {
        return item.id
      })
      this.checkedCities = val ? arr : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.checkData.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkData.length
    },
    //保存提交
    censusSub() {
      let data = {
        roleId: this.activeName,
        statisticalIds: this.checkedCities,
      }
      api.statisticalRoleUpdate(data).then(res => {
        if (res.code == '200') {
          this.$message({
            message: '保存成功',
            type: 'success',
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.all {
  margin-bottom: 10px;
}
.subBut {
  margin-top: 20px;
}
.select {
  margin-bottom: 10px;
}
</style>
